<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学海教育 - 教师工作台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        :root {
            --primary: #4a6bff;
            --secondary: #6c757d;
            --success: #28a745;
            --warning: #ffc107;
            --danger: #dc3545;
            --light: #f8f9fa;
            --dark: #343a40;
            --border-radius: 8px;
            --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }
        
        body {
            background-color: #f5f7fb;
            color: #333;
            line-height: 1.6;
        }
        
        .container {
            display: flex;
            min-height: 100vh;
        }
        
        /* 侧边栏样式 */
        .sidebar {
            width: 250px;
            background: linear-gradient(to bottom, #4a6bff, #3a5bd9);
            color: white;
            padding: 20px 0;
            box-shadow: var(--box-shadow);
            z-index: 100;
        }
        
        .logo {
            display: flex;
            align-items: center;
            padding: 0 20px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 20px;
        }
        
        .logo i {
            font-size: 28px;
            margin-right: 10px;
        }
        
        .logo h1 {
            font-size: 20px;
        }
        
        .user-info {
            padding: 0 20px 20px;
            display: flex;
            align-items: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            margin-bottom: 20px;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            margin-right: 10px;
        }
        
        .nav-links {
            list-style: none;
        }
        
        .nav-links li {
            padding: 12px 20px;
            margin: 5px 0;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
        }
        
        .nav-links li.active {
            background-color: rgba(255, 255, 255, 0.15);
            border-left: 4px solid white;
        }
        
        .nav-links li:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }
        
        .nav-links i {
            margin-right: 12px;
            font-size: 18px;
        }
        
        /* 主内容区样式 */
        .main-content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
        }
        
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eaeaea;
        }
        
        .header h2 {
            color: var(--dark);
        }
        
        .action-buttons {
            display: flex;
            gap: 10px;
        }
        
        /* 内容卡片样式 */
        .content-section {
            display: none;
        }
        
        .content-section.active {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .section-title {
            font-size: 24px;
            margin-bottom: 20px;
            color: var(--dark);
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 10px;
            color: var(--primary);
        }
        
        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .card {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            overflow: hidden;
            transition: var(--transition);
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
        }
        
        .card-header {
            padding: 15px;
            background-color: var(--primary);
            color: white;
        }
        
        .card-body {
            padding: 15px;
        }
        
        .card-footer {
            padding: 15px;
            border-top: 1px solid #eaeaea;
            display: flex;
            justify-content: space-between;
        }
        
        .btn {
            padding: 8px 16px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: #3a5bd9;
        }
        
        .btn-success {
            background-color: var(--success);
            color: white;
        }
        
        .btn-success:hover {
            background-color: #218838;
        }
        
        .btn-warning {
            background-color: var(--warning);
            color: var(--dark);
        }
        
        .btn-warning:hover {
            background-color: #e0a800;
        }
        
        .btn-danger {
            background-color: var(--danger);
            color: white;
        }
        
        .btn-danger:hover {
            background-color: #c82333;
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--primary);
            color: var(--primary);
        }
        
        .btn-outline:hover {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-sm {
            padding: 5px 10px;
            font-size: 14px;
        }
        
        .stats {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            font-size: 14px;
        }
        
        .stat-item i {
            margin-right: 5px;
            color: var(--primary);
        }
        
        /* 表单样式 */
        .form-container {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 25px;
            max-width: 600px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark);
        }
        
        .form-control {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 15px;
            transition: var(--transition);
        }
        
        .form-control:focus {
            border-color: var(--primary);
            outline: none;
        }
        
        textarea.form-control {
            min-height: 120px;
            resize: vertical;
        }
        
        /* 课程详情页面 */
        .course-detail-header {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 20px;
            margin-bottom: 20px;
        }
        
        .course-tabs {
            display: flex;
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 20px;
        }
        
        .course-tab {
            padding: 12px 20px;
            cursor: pointer;
            font-weight: 500;
            color: var(--secondary);
            transition: var(--transition);
            border-bottom: 2px solid transparent;
        }
        
        .course-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .chapter-list {
            list-style: none;
        }
        
        .chapter-item {
            padding: 15px;
            border: 1px solid #eaeaea;
            border-radius: var(--border-radius);
            margin-bottom: 10px;
        }
        
        .chapter-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .chapter-info {
            display: flex;
            align-items: center;
        }
        
        .chapter-number {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-weight: 500;
        }
        
        .chapter-actions {
            display: flex;
            gap: 5px;
        }
        
        .materials-section {
            margin-top: 15px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: var(--border-radius);
        }
        
        .materials-title {
            font-weight: 500;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .materials-list {
            list-style: none;
        }
        
        .material-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eaeaea;
        }
        
        .material-item:last-child {
            border-bottom: none;
        }
        
        .material-info {
            display: flex;
            align-items: center;
        }
        
        .material-icon {
            margin-right: 10px;
            color: var(--primary);
        }
        
        .student-list {
            list-style: none;
        }
        
        .student-item {
            padding: 12px 15px;
            border: 1px solid #eaeaea;
            border-radius: var(--border-radius);
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .student-info {
            display: flex;
            align-items: center;
        }
        
        .student-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-weight: 500;
        }
        
        .student-actions {
            display: flex;
            gap: 5px;
        }
        
        .progress-bar {
            height: 6px;
            background-color: #e9ecef;
            border-radius: 3px;
            margin: 10px 0;
            overflow: hidden;
        }
        
        .progress {
            height: 100%;
            background-color: var(--success);
            border-radius: 3px;
        }
        
        .status-badge {
            padding: 4px 8px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-pending {
            background-color: #fff3e0;
            color: #ff9800;
        }
        
        .status-approved {
            background-color: #e8f5e9;
            color: var(--success);
        }
        
        .status-rejected {
            background-color: #ffebee;
            color: var(--danger);
        }
        
        .assignment-list {
            list-style: none;
        }
        
        .assignment-item {
            padding: 15px;
            border: 1px solid #eaeaea;
            border-radius: var(--border-radius);
            margin-bottom: 10px;
        }
        
        .assignment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .assignment-info {
            display: flex;
            gap: 15px;
            margin-bottom: 10px;
            font-size: 14px;
            color: var(--secondary);
        }
        
        .assignment-actions {
            display: flex;
            gap: 5px;
        }
        
        .submissions-section {
            margin-top: 15px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: var(--border-radius);
        }
        
        .submissions-title {
            font-weight: 500;
            margin-bottom: 10px;
        }
        
        .submissions-list {
            list-style: none;
        }
        
        .submission-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eaeaea;
        }
        
        .submission-item:last-child {
            border-bottom: none;
        }
        
        .submission-info {
            display: flex;
            align-items: center;
        }
        
        .submission-actions {
            display: flex;
            gap: 5px;
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal.active {
            display: flex;
        }
        
        .modal-content {
            background-color: white;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            width: 90%;
            max-width: 500px;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .modal-header {
            padding: 15px 20px;
            border-bottom: 1px solid #eaeaea;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-body {
            padding: 20px;
        }
        
        .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #eaeaea;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
        }
        
        .close-modal {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
            color: var(--secondary);
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .container {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                padding: 10px 0;
            }
            
            .nav-links {
                display: flex;
                justify-content: space-around;
            }
            
            .nav-links li {
                flex-direction: column;
                text-align: center;
                padding: 10px;
                font-size: 14px;
            }
            
            .nav-links li.active {
                border-left: none;
                border-bottom: 3px solid white;
            }
            
            .nav-links i {
                margin-right: 0;
                margin-bottom: 5px;
            }
            
            .card-container {
                grid-template-columns: 1fr;
            }
            
            .header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
            
            .action-buttons {
                width: 100%;
                justify-content: space-between;
            }
            
            .chapter-header, .student-item, .assignment-header, .submission-item {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
            
            .chapter-actions, .student-actions, .assignment-actions, .submission-actions {
                width: 100%;
                justify-content: flex-end;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 侧边导航栏 -->
        <div class="sidebar">
            <div class="logo">
                <i class="fas fa-graduation-cap"></i>
                <h1>学海教育</h1>
            </div>
            
            <div class="user-info">
                <div class="user-avatar">王</div>
                <div>
                    <div>王教授</div>
                    <div style="font-size: 12px; opacity: 0.8;">教师</div>
                </div>
            </div>
            
            <ul class="nav-links">
                <li class="active" data-target="my-courses">
                    <i class="fas fa-book-open"></i>
                    <span>我的课程</span>
                </li>
                <li data-target="create-course">
                    <i class="fas fa-plus-circle"></i>
                    <span>创建课程</span>
                </li>
                <li data-target="students">
                    <i class="fas fa-users"></i>
                    <span>学生管理</span>
                </li>
                <li data-target="analytics">
                    <i class="fas fa-chart-bar"></i>
                    <span>数据分析</span>
                </li>
            </ul>
        </div>
        
        <!-- 主内容区 -->
        <div class="main-content">
            <div class="header">
                <h2>教师工作台</h2>
                <div class="action-buttons">
                    <button class="btn btn-outline">
                        <i class="fas fa-bell"></i> 通知
                    </button>
                    <button class="btn btn-outline">
                        <i class="fas fa-cog"></i> 设置
                    </button>
                </div>
            </div>
            
            <!-- 我的课程 -->
            <div class="content-section active" id="my-courses">
                <h3 class="section-title">
                    <i class="fas fa-book-open"></i>
                    我的课程
                </h3>
                
                <div class="card-container">
                    <!-- 课程1 -->
                    <div class="card">
                        <div class="card-header">
                            <h4>高等数学</h4>
                            <p>已开课 · 128名学生</p>
                        </div>
                        <div class="card-body">
                            <p>本课程涵盖微积分、线性代数和概率统计等高等数学核心内容。</p>
                            
                            <div class="stats">
                                <div class="stat-item">
                                    <i class="fas fa-play-circle"></i>
                                    <span>12章节</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-tasks"></i>
                                    <span>8个作业</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-chart-line"></i>
                                    <span>78%完成率</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button class="btn btn-outline">课程统计</button>
                            <button class="btn btn-primary enter-course" data-course="1">进入课程</button>
                        </div>
                    </div>
                    
                    <!-- 课程2 -->
                    <div class="card">
                        <div class="card-header">
                            <h4>Java程序设计</h4>
                            <p>已开课 · 96名学生</p>
                        </div>
                        <div class="card-body">
                            <p>从基础语法到面向对象编程，全面掌握Java开发技能。</p>
                            
                            <div class="stats">
                                <div class="stat-item">
                                    <i class="fas fa-play-circle"></i>
                                    <span>10章节</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-tasks"></i>
                                    <span>6个作业</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-chart-line"></i>
                                    <span>85%完成率</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button class="btn btn-outline">课程统计</button>
                            <button class="btn btn-primary enter-course" data-course="2">进入课程</button>
                        </div>
                    </div>
                    
                    <!-- 课程3 -->
                    <div class="card">
                        <div class="card-header">
                            <h4>英语写作</h4>
                            <p>筹备中 · 即将开课</p>
                        </div>
                        <div class="card-body">
                            <p>提升英语写作能力，掌握各类文体写作技巧。</p>
                            
                            <div class="stats">
                                <div class="stat-item">
                                    <i class="fas fa-play-circle"></i>
                                    <span>8章节</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-tasks"></i>
                                    <span>5个作业</span>
                                </div>
                                <div class="stat-item">
                                    <i class="fas fa-chart-line"></i>
                                    <span>0%完成率</span>
                                </div>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button class="btn btn-outline">编辑课程</button>
                            <button class="btn btn-warning">发布课程</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 创建课程 -->
            <div class="content-section" id="create-course">
                <h3 class="section-title">
                    <i class="fas fa-plus-circle"></i>
                    创建新课程
                </h3>
                
                <div class="form-container">
                    <form id="course-form">
                        <div class="form-group">
                            <label for="course-name">课程名称</label>
                            <input type="text" id="course-name" class="form-control" placeholder="请输入课程名称" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="course-category">课程分类</label>
                            <select id="course-category" class="form-control" required>
                                <option value="">请选择课程分类</option>
                                <option value="math">数学</option>
                                <option value="programming">编程</option>
                                <option value="language">语言</option>
                                <option value="science">科学</option>
                                <option value="arts">艺术</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="course-description">课程描述</label>
                            <textarea id="course-description" class="form-control" placeholder="请简要描述课程内容" required></textarea>
                        </div>
                        
                        <div class="form-group">
                            <label for="course-duration">课程时长（周）</label>
                            <input type="number" id="course-duration" class="form-control" min="1" max="52" value="12" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="course-level">难度级别</label>
                            <select id="course-level" class="form-control" required>
                                <option value="beginner">初级</option>
                                <option value="intermediate" selected>中级</option>
                                <option value="advanced">高级</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="course-image">课程封面</label>
                            <input type="file" id="course-image" class="form-control">
                        </div>
                        
                        <div style="display: flex; gap: 10px; margin-top: 25px;">
                            <button type="button" class="btn btn-outline" style="flex: 1;">取消</button>
                            <button type="submit" class="btn btn-primary" style="flex: 1;">创建课程</button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- 课程详情 -->
            <div class="content-section" id="course-detail">
                <div class="course-detail-header">
                    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 15px;">
                        <div>
                            <h3 id="detail-course-name">高等数学</h3>
                            <p id="detail-course-info">已开课 · 128名学生 · 12章节</p>
                        </div>
                        <button class="btn btn-outline" id="back-to-courses">
                            <i class="fas fa-arrow-left"></i> 返回课程列表
                        </button>
                    </div>
                    
                    <div class="course-tabs">
                        <div class="course-tab active" data-tab="chapters">章节管理</div>
                        <div class="course-tab" data-tab="students">学生列表</div>
                        <div class="course-tab" data-tab="assignments">作业管理</div>
                        <div class="course-tab" data-tab="analytics">课程数据</div>
                    </div>
                </div>
                
                <!-- 章节管理 -->
                <div class="tab-content active" id="chapters-tab">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                        <h4>课程章节</h4>
                        <button class="btn btn-success" id="add-chapter-btn">
                            <i class="fas fa-plus"></i> 添加章节
                        </button>
                    </div>
                    
                    <ul class="chapter-list">
                        <li class="chapter-item">
                            <div class="chapter-header">
                                <div class="chapter-info">
                                    <div class="chapter-number">1</div>
                                    <div>
                                        <div style="font-weight: 500;">函数与极限</div>
                                        <div style="font-size: 14px; color: var(--secondary);">3课时 · 45分钟</div>
                                    </div>
                                </div>
                                <div class="chapter-actions">
                                    <button class="btn btn-outline btn-sm upload-material" data-chapter="1">
                                        <i class="fas fa-upload"></i> 上传课件
                                    </button>
                                    <button class="btn btn-outline btn-sm">
                                        <i class="fas fa-edit"></i> 编辑
                                    </button>
                                    <button class="btn btn-outline btn-sm">
                                        <i class="fas fa-trash"></i> 删除
                                    </button>
                                </div>
                            </div>
                            <div class="materials-section">
                                <div class="materials-title">
                                    <span>课件列表</span>
                                </div>
                                <ul class="materials-list">
                                    <li class="material-item">
                                        <div class="material-info">
                                            <i class="fas fa-file-pdf material-icon"></i>
                                            <div>
                                                <div>函数与极限讲义.pdf</div>
                                                <div style="font-size: 12px; color: var(--secondary);">上传于 2023-10-10</div>
                                            </div>
                                        </div>
                                        <div>
                                            <button class="btn btn-outline btn-sm">
                                                <i class="fas fa-download"></i> 下载
                                            </button>
                                            <button class="btn btn-outline btn-sm">
                                                <i class="fas fa-trash"></i> 删除
                                            </button>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        
                        <li class="chapter-item">
                            <div class="chapter-header">
                                <div class="chapter-info">
                                    <div class="chapter-number">2</div>
                                    <div>
                                        <div style="font-weight: 500;">导数与微分</div>
                                        <div style="font-size: 14px; color: var(--secondary);">4课时 · 60分钟</div>
                                    </div>
                                </div>
                                <div class="chapter-actions">
                                    <button class="btn btn-outline btn-sm upload-material" data-chapter="2">
                                        <i class="fas fa-upload"></i> 上传课件
                                    </button>
                                    <button class="btn btn-outline btn-sm">
                                        <i class="fas fa-edit"></i> 编辑
                                    </button>
                                    <button class="btn btn-outline btn-sm">
                                        <i class="fas fa-trash"></i> 删除
                                    </button>
                                </div>
                            </div>
                            <div class="materials-section">
                                <div class="materials-title">
                                    <span>课件列表</span>
                                </div>
                                <ul class="materials-list">
                                    <li class="material-item">
                                        <div class="material-info">
                                            <i class="fas fa-file-powerpoint material-icon"></i>
                                            <div>
                                                <div>导数与微分课件.pptx</div>
                                                <div style="font-size: 12px; color: var(--secondary);">上传于 2023-10-15</div>
                                            </div>
                                        </div>
                                        <div>
                                            <button class="btn btn-outline btn-sm">
                                                <i class="fas fa-download"></i> 下载
                                            </button>
                                            <button class="btn btn-outline btn-sm">
                                                <i class="fas fa-trash"></i> 删除
                                            </button>
                                        </div>
                                    </li>
                                    <li class="material-item">
                                        <div class="material-info">
                                            <i class="fas fa-file-alt material-icon"></i>
                                            <div>
                                                <div>微分练习题.docx</div>
                                                <div style="font-size: 12px; color: var(--secondary);">上传于 2023-10-16</div>
                                            </div>
                                        </div>
                                        <div>
                                            <button class="btn btn-outline btn-sm">
                                                <i class="fas fa-download"></i> 下载
                                            </button>
                                            <button class="btn btn-outline btn-sm">
                                                <i class="fas fa-trash"></i> 删除
                                            </button>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <!-- 学生列表 -->
                <div class="tab-content" id="students-tab">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                        <h4>选课学生</h4>
                        <div>
                            <button class="btn btn-outline">
                                <i class="fas fa-download"></i> 导出名单
                            </button>
                            <button class="btn btn-success" id="batch-approve-btn">
                                <i class="fas fa-check-double"></i> 批量批准
                            </button>
                        </div>
                    </div>
                    
                    <ul class="student-list">
                        <li class="student-item">
                            <div class="student-info">
                                <div class="student-avatar">张</div>
                                <div>
                                    <div style="font-weight: 500;">张三</div>
                                    <div style="font-size: 14px; color: var(--secondary);">计算机科学系 · 2021级</div>
                                    <div class="progress-bar">
                                        <div class="progress" style="width: 85%"></div>
                                    </div>
                                    <div style="font-size: 14px; margin-top: 5px;">课程进度: 85%</div>
                                </div>
                            </div>
                            <div class="student-actions">
                                <span class="status-badge status-approved">已批准</span>
                                <button class="btn btn-outline btn-sm">
                                    <i class="fas fa-eye"></i> 详情
                                </button>
                            </div>
                        </li>
                        
                        <li class="student-item">
                            <div class="student-info">
                                <div class="student-avatar">李</div>
                                <div>
                                    <div style="font-weight: 500;">李四</div>
                                    <div style="font-size: 14px; color: var(--secondary);">数学系 · 2021级</div>
                                    <div class="progress-bar">
                                        <div class="progress" style="width: 65%"></div>
                                    </div>
                                    <div style="font-size: 14px; margin-top: 5px;">课程进度: 65%</div>
                                </div>
                            </div>
                            <div class="student-actions">
                                <span class="status-badge status-approved">已批准</span>
                                <button class="btn btn-outline btn-sm">
                                    <i class="fas fa-eye"></i> 详情
                                </button>
                            </div>
                        </li>
                        
                        <li class="student-item">
                            <div class="student-info">
                                <div class="student-avatar">王</div>
                                <div>
                                    <div style="font-weight: 500;">王五</div>
                                    <div style="font-size: 14px; color: var(--secondary);">物理系 · 2022级</div>
                                    <div style="font-size: 14px; margin-top: 5px;">等待审批中</div>
                                </div>
                            </div>
                            <div class="student-actions">
                                <span class="status-badge status-pending">待审批</span>
                                <button class="btn btn-success btn-sm approve-student">
                                    <i class="fas fa-check"></i> 批准
                                </button>
                                <button class="btn btn-danger btn-sm reject-student">
                                    <i class="fas fa-times"></i> 拒绝
                                </button>
                            </div>
                        </li>
                        
                        <li class="student-item">
                            <div class="student-info">
                                <div class="student-avatar">赵</div>
                                <div>
                                    <div style="font-weight: 500;">赵六</div>
                                    <div style="font-size: 14px; color: var(--secondary);">化学系 · 2022级</div>
                                    <div style="font-size: 14px; margin-top: 5px;">等待审批中</div>
                                </div>
                            </div>
                            <div class="student-actions">
                                <span class="status-badge status-pending">待审批</span>
                                <button class="btn btn-success btn-sm approve-student">
                                    <i class="fas fa-check"></i> 批准
                                </button>
                                <button class="btn btn-danger btn-sm reject-student">
                                    <i class="fas fa-times"></i> 拒绝
                                </button>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <!-- 作业管理 -->
                <div class="tab-content" id="assignments-tab">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                        <h4>作业管理</h4>
                        <button class="btn btn-success" id="create-assignment-btn">
                            <i class="fas fa-plus"></i> 发布作业
                        </button>
                    </div>
                    
                    <ul class="assignment-list">
                        <li class="assignment-item">
                            <div class="assignment-header">
                                <div>
                                    <div style="font-weight: 500;">高等数学作业三</div>
                                    <div class="assignment-info">
                                        <span><i class="far fa-clock"></i> 截止时间: 2023-10-15</span>
                                        <span><i class="fas fa-star"></i> 满分: 100分</span>
                                    </div>
                                </div>
                                <div class="assignment-actions">
                                    <button class="btn btn-outline btn-sm">
                                        <i class="fas fa-edit"></i> 编辑
                                    </button>
                                    <button class="btn btn-outline btn-sm">
                                        <i class="fas fa-trash"></i> 删除
                                    </button>
                                </div>
                            </div>
                            <div class="submissions-section">
                                <div class="submissions-title">提交情况 (已提交: 45/128)</div>
                                <ul class="submissions-list">
                                    <li class="submission-item">
                                        <div class="submission-info">
                                            <div class="student-avatar">张</div>
                                            <div>
                                                <div style="font-weight: 500;">张三</div>
                                                <div style="font-size: 14px; color: var(--secondary);">提交时间: 2023-10-12 15:30</div>
                                            </div>
                                        </div>
                                        <div class="submission-actions">
                                            <span style="margin-right: 10px;">得分: 92/100</span>
                                            <button class="btn btn-outline btn-sm">
                                                <i class="fas fa-download"></i> 下载
                                            </button>
                                            <button class="btn btn-primary btn-sm grade-submission">
                                                <i class="fas fa-edit"></i> 评分
                                            </button>
                                        </div>
                                    </li>
                                    <li class="submission-item">
                                        <div class="submission-info">
                                            <div class="student-avatar">李</div>
                                            <div>
                                                <div style="font-weight: 500;">李四</div>
                                                <div style="font-size: 14px; color: var(--secondary);">提交时间: 2023-10-13 09:45</div>
                                            </div>
                                        </div>
                                        <div class="submission-actions">
                                            <span style="margin-right: 10px;">得分: 85/100</span>
                                            <button class="btn btn-outline btn-sm">
                                                <i class="fas fa-download"></i> 下载
                                            </button>
                                            <button class="btn btn-primary btn-sm grade-submission">
                                                <i class="fas fa-edit"></i> 评分
                                            </button>
                                        </div>
                                    </li>
                                    <li class="submission-item">
                                        <div class="submission-info">
                                            <div class="student-avatar">王</div>
                                            <div>
                                                <div style="font-weight: 500;">王五</div>
                                                <div style="font-size: 14px; color: var(--secondary);">等待评分</div>
                                            </div>
                                        </div>
                                        <div class="submission-actions">
                                            <span style="margin-right: 10px; color: var(--warning);">未评分</span>
                                            <button class="btn btn-outline btn-sm">
                                                <i class="fas fa-download"></i> 下载
                                            </button>
                                            <button class="btn btn-primary btn-sm grade-submission">
                                                <i class="fas fa-edit"></i> 评分
                                            </button>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        
                        <li class="assignment-item">
                            <div class="assignment-header">
                                <div>
                                    <div style="font-weight: 500;">高等数学作业二</div>
                                    <div class="assignment-info">
                                        <span><i class="far fa-clock"></i> 截止时间: 2023-09-30</span>
                                        <span><i class="fas fa-star"></i> 满分: 100分</span>
                                    </div>
                                </div>
                                <div class="assignment-actions">
                                    <button class="btn btn-outline btn-sm">
                                        <i class="fas fa-edit"></i> 编辑
                                    </button>
                                    <button class="btn btn-outline btn-sm">
                                        <i class="fas fa-trash"></i> 删除
                                    </button>
                                </div>
                            </div>
                            <div class="submissions-section">
                                <div class="submissions-title">提交情况 (已提交: 120/128)</div>
                                <p style="font-size: 14px; color: var(--secondary);">所有提交已评分</p>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <!-- 课程数据 -->
                <div class="tab-content" id="analytics-tab">
                    <h4>课程数据统计</h4>
                    <p>数据分析功能正在开发中...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 上传课件模态框 -->
    <div class="modal" id="upload-material-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>上传课件</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="upload-material-form">
                    <div class="form-group">
                        <label for="material-file">选择文件</label>
                        <input type="file" id="material-file" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="material-name">课件名称</label>
                        <input type="text" id="material-name" class="form-control" placeholder="请输入课件名称" required>
                    </div>
                    <div class="form-group">
                        <label for="material-description">课件描述</label>
                        <textarea id="material-description" class="form-control" placeholder="请输入课件描述"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" id="cancel-upload">取消</button>
                <button class="btn btn-primary" id="confirm-upload">上传</button>
            </div>
        </div>
    </div>

    <!-- 发布作业模态框 -->
    <div class="modal" id="create-assignment-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>发布作业</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="create-assignment-form">
                    <div class="form-group">
                        <label for="assignment-title">作业标题</label>
                        <input type="text" id="assignment-title" class="form-control" placeholder="请输入作业标题" required>
                    </div>
                    <div class="form-group">
                        <label for="assignment-content">作业内容</label>
                        <textarea id="assignment-content" class="form-control" placeholder="请输入作业要求和内容" required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="assignment-deadline">截止时间</label>
                        <input type="datetime-local" id="assignment-deadline" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="assignment-max-score">满分分数</label>
                        <input type="number" id="assignment-max-score" class="form-control" min="1" value="100" required>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" id="cancel-assignment">取消</button>
                <button class="btn btn-primary" id="confirm-assignment">发布</button>
            </div>
        </div>
    </div>

    <!-- 评分模态框 -->
    <div class="modal" id="grade-submission-modal">
        <div class="modal-content">
            <div class="modal-header">
                <h3>作业评分</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <div id="submission-info">
                    <p><strong>学生:</strong> <span id="student-name">张三</span></p>
                    <p><strong>作业:</strong> <span id="assignment-name">高等数学作业三</span></p>
                    <p><strong>提交时间:</strong> <span id="submission-time">2023-10-12 15:30</span></p>
                </div>
                <form id="grade-submission-form">
                    <div class="form-group">
                        <label for="submission-score">得分</label>
                        <input type="number" id="submission-score" class="form-control" min="0" max="100" required>
                    </div>
                    <div class="form-group">
                        <label for="submission-feedback">评语</label>
                        <textarea id="submission-feedback" class="form-control" placeholder="请输入评语"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" id="cancel-grade">取消</button>
                <button class="btn btn-primary" id="confirm-grade">提交评分</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 主导航切换功能
            const navLinks = document.querySelectorAll('.nav-links li');
            const contentSections = document.querySelectorAll('.content-section');
            
            navLinks.forEach(link => {
                link.addEventListener('click', function() {
                    const targetId = this.getAttribute('data-target');
                    
                    // 更新活跃导航项
                    navLinks.forEach(item => item.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 显示对应内容区域
                    contentSections.forEach(section => {
                        section.classList.remove('active');
                        if (section.id === targetId) {
                            section.classList.add('active');
                        }
                    });
                });
            });
            
            // 课程详情切换功能
            const courseTabs = document.querySelectorAll('.course-tab');
            const tabContents = document.querySelectorAll('.tab-content');
            
            courseTabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    
                    // 更新活跃标签
                    courseTabs.forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 显示对应内容
                    tabContents.forEach(content => {
                        content.classList.remove('active');
                        if (content.id === `${tabId}-tab`) {
                            content.classList.add('active');
                        }
                    });
                });
            });
            
            // 进入课程功能
            const enterCourseButtons = document.querySelectorAll('.enter-course');
            const backToCoursesButton = document.getElementById('back-to-courses');
            
            enterCourseButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const courseId = this.getAttribute('data-course');
                    
                    // 隐藏所有内容区域
                    contentSections.forEach(section => {
                        section.classList.remove('active');
                    });
                    
                    // 显示课程详情
                    document.getElementById('course-detail').classList.add('active');
                    
                    // 更新课程详情信息
                    updateCourseDetail(courseId);
                });
            });
            
            // 返回课程列表功能
            backToCoursesButton.addEventListener('click', function() {
                // 隐藏课程详情
                document.getElementById('course-detail').classList.remove('active');
                
                // 显示我的课程
                document.getElementById('my-courses').classList.add('active');
                
                // 更新导航状态
                navLinks.forEach(item => {
                    item.classList.remove('active');
                    if (item.getAttribute('data-target') === 'my-courses') {
                        item.classList.add('active');
                    }
                });
            });
            
            // 更新课程详情信息
            function updateCourseDetail(courseId) {
                const courses = {
                    '1': {
                        name: '高等数学',
                        info: '已开课 · 128名学生 · 12章节'
                    },
                    '2': {
                        name: 'Java程序设计',
                        info: '已开课 · 96名学生 · 10章节'
                    }
                };
                
                const course = courses[courseId];
                if (course) {
                    document.getElementById('detail-course-name').textContent = course.name;
                    document.getElementById('detail-course-info').textContent = course.info;
                }
            }
            
            // 创建课程表单提交
            const courseForm = document.getElementById('course-form');
            courseForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const courseName = document.getElementById('course-name').value;
                alert(`课程 "${courseName}" 创建成功！`);
                
                // 在实际应用中，这里会有表单提交和API调用
                // 重置表单
                courseForm.reset();
                
                // 切换到我的课程页面
                navLinks.forEach(item => {
                    item.classList.remove('active');
                    if (item.getAttribute('data-target') === 'my-courses') {
                        item.classList.add('active');
                    }
                });
                
                contentSections.forEach(section => {
                    section.classList.remove('active');
                    if (section.id === 'my-courses') {
                        section.classList.add('active');
                    }
                });
            });
            
            // 模态框功能
            const modals = document.querySelectorAll('.modal');
            const closeModalButtons = document.querySelectorAll('.close-modal, .btn-outline');
            
            // 关闭模态框
            function closeModal(modal) {
                modal.classList.remove('active');
            }
            
            // 点击模态框外部关闭
            modals.forEach(modal => {
                modal.addEventListener('click', function(e) {
                    if (e.target === this) {
                        closeModal(this);
                    }
                });
            });
            
            // 点击关闭按钮关闭模态框
            closeModalButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const modal = this.closest('.modal');
                    if (modal) {
                        closeModal(modal);
                    }
                });
            });
            
            // 上传课件功能
            const uploadMaterialButtons = document.querySelectorAll('.upload-material');
            const uploadMaterialModal = document.getElementById('upload-material-modal');
            const confirmUploadButton = document.getElementById('confirm-upload');
            
            uploadMaterialButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const chapter = this.getAttribute('data-chapter');
                    uploadMaterialModal.classList.add('active');
                    // 在实际应用中，这里可以设置当前章节信息
                });
            });
            
            confirmUploadButton.addEventListener('click', function() {
                const materialName = document.getElementById('material-name').value;
                alert(`课件 "${materialName}" 上传成功！`);
                closeModal(uploadMaterialModal);
                document.getElementById('upload-material-form').reset();
            });
            
            // 发布作业功能
            const createAssignmentButton = document.getElementById('create-assignment-btn');
            const createAssignmentModal = document.getElementById('create-assignment-modal');
            const confirmAssignmentButton = document.getElementById('confirm-assignment');
            
            createAssignmentButton.addEventListener('click', function() {
                createAssignmentModal.classList.add('active');
            });
            
            confirmAssignmentButton.addEventListener('click', function() {
                const assignmentTitle = document.getElementById('assignment-title').value;
                alert(`作业 "${assignmentTitle}" 发布成功！`);
                closeModal(createAssignmentModal);
                document.getElementById('create-assignment-form').reset();
            });
            
            // 学生审批功能
            const approveStudentButtons = document.querySelectorAll('.approve-student');
            const rejectStudentButtons = document.querySelectorAll('.reject-student');
            
            approveStudentButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const studentItem = this.closest('.student-item');
                    const studentName = studentItem.querySelector('.student-info div:first-child').textContent;
                    
                    if (confirm(`确定要批准学生 "${studentName}" 加入课程吗？`)) {
                        // 更新状态
                        const statusBadge = studentItem.querySelector('.status-badge');
                        statusBadge.textContent = '已批准';
                        statusBadge.className = 'status-badge status-approved';
                        
                        // 更新按钮
                        const actions = studentItem.querySelector('.student-actions');
                        actions.innerHTML = `
                            <span class="status-badge status-approved">已批准</span>
                            <button class="btn btn-outline btn-sm">
                                <i class="fas fa-eye"></i> 详情
                            </button>
                        `;
                        
                        alert(`已批准学生 "${studentName}" 加入课程`);
                    }
                });
            });
            
            rejectStudentButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const studentItem = this.closest('.student-item');
                    const studentName = studentItem.querySelector('.student-info div:first-child').textContent;
                    
                    if (confirm(`确定要拒绝学生 "${studentName}" 加入课程吗？`)) {
                        // 在实际应用中，这里会从列表中移除学生或更新状态为"已拒绝"
                        studentItem.remove();
                        alert(`已拒绝学生 "${studentName}" 加入课程`);
                    }
                });
            });
            
            // 批量批准功能
            const batchApproveButton = document.getElementById('batch-approve-btn');
            batchApproveButton.addEventListener('click', function() {
                const pendingStudents = document.querySelectorAll('.status-badge.status-pending');
                
                if (pendingStudents.length === 0) {
                    alert('没有待审批的学生');
                    return;
                }
                
                if (confirm(`确定要批量批准 ${pendingStudents.length} 名待审批学生吗？`)) {
                    pendingStudents.forEach(badge => {
                        const studentItem = badge.closest('.student-item');
                        const studentName = studentItem.querySelector('.student-info div:first-child').textContent;
                        
                        // 更新状态
                        badge.textContent = '已批准';
                        badge.className = 'status-badge status-approved';
                        
                        // 更新按钮
                        const actions = studentItem.querySelector('.student-actions');
                        actions.innerHTML = `
                            <span class="status-badge status-approved">已批准</span>
                            <button class="btn btn-outline btn-sm">
                                <i class="fas fa-eye"></i> 详情
                            </button>
                        `;
                    });
                    
                    alert(`已批量批准 ${pendingStudents.length} 名学生`);
                }
            });
            
            // 作业评分功能
            const gradeSubmissionButtons = document.querySelectorAll('.grade-submission');
            const gradeSubmissionModal = document.getElementById('grade-submission-modal');
            const confirmGradeButton = document.getElementById('confirm-grade');
            
            gradeSubmissionButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const submissionItem = this.closest('.submission-item');
                    const studentName = submissionItem.querySelector('.student-info div:first-child').textContent;
                    const submissionTime = submissionItem.querySelector('.student-info div:last-child').textContent.replace('提交时间: ', '');
                    
                    // 设置模态框内容
                    document.getElementById('student-name').textContent = studentName;
                    document.getElementById('submission-time').textContent = submissionTime;
                    
                    gradeSubmissionModal.classList.add('active');
                });
            });
            
            confirmGradeButton.addEventListener('click', function() {
                const score = document.getElementById('submission-score').value;
                const feedback = document.getElementById('submission-feedback').value;
                
                alert(`评分提交成功！得分: ${score}, 评语: ${feedback}`);
                closeModal(gradeSubmissionModal);
                document.getElementById('grade-submission-form').reset();
            });
        });
    </script>
</body>
</html> 	